<template>
  <div class="menu">
    <!--1.搜索 -->
    <el-card id="searchForm">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="菜单名称">
          <el-input v-model="form.menuName" size="mini" placeholder="请输入部门名称"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.status" placeholder="请选择状态" size="mini">
            <el-option label="正常" value="0"></el-option>
            <el-option label="停用" value="1"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="search">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click.native="reactBtn" plain>重置</el-button>
        </el-form-item>

      </el-form>


      <!-- 表格 -->
      <div class="openbox">
        <el-button type="info" plain size="mini" icon="el-icon-sort" @click="toggleRowExpansion"
          style="margin-bottom:10px">
          展开/折叠
        </el-button>

      </div>
      <el-table v-if="refreshTable" :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="menuId" border
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}" :default-expand-all="expands" lazy
        ref="tableIns">
        <el-table-column prop="menuName" label="菜单名称" width="160" :show-overflow-tooltip='true'>
        </el-table-column>
        <!-- <el-table-column prop="name" label="图标" width="50">
        </el-table-column> -->
        <el-table-column prop="orderNum" label="排序" width="60" align="center">
        </el-table-column>
        <el-table-column prop="component" label="权限标识" width="180" align="center">
        </el-table-column>
        <el-table-column prop="component" label="组件路径" width="180" align="center">
        </el-table-column>
        <el-table-column prop="status" label="状态" width="94" align="center">
          <template slot-scope="scope">
            <!-- <el-tag v-if="+scope.row.status===0">正常</el-tag>
            <el-tag v-if="+scope.row.status!=0">停用</el-tag> -->

            <el-tag :type="scope.row.status === '0' ? 'primary' : 'danger'" disable-transitions>{{ scope.row.status ===
            "0" ? "正常" : "停用" }}</el-tag>

          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center" width="200">
        </el-table-column>
        <el-table-column label="操作" width="110" align="center"></el-table-column>
      </el-table>

    </el-card>

  </div>
</template>



<script>

export default {
  name: "Menu",
  data() {
    return {
      tableData: [],
      tableLoading: false,
      // 搜索
      form: {
        menuName: "",
        status: "",
      },
      value: '',
      //展开、收起
      expands: false,
      refreshTable: true
    }
  },
  methods: {
    //搜索
    search() {
      let menuName = this.form.menuName,
        status = this.form.status;
      this.init(menuName, status);
    },
    // 重置搜索框
    reactBtn() {
      this.form.menuName = "";
      this.form.status = ""
      this.init();
    },
    // 处理数据：树形
    setTreeData(source) {
      let cloneData = JSON.parse(JSON.stringify(source))      // 对源数据深度克隆
      return cloneData.filter(father => {                      // 循环所有项，并添加children属性
        let branchArr = cloneData.filter(child => father.menuId == child.parentId);   // 返回每一项的子级数组
        branchArr.length > 0 ? father.children = branchArr : ''   //给父级添加一个children属性，并赋值
        return father.parentId == 0;      //返回第一层
      })
    },
    // 处理数据：树形(二选一)
    createTree(arr, str = '') {
      return arr.filter((item) => {
        if (item.parentId === str) {
          item.children = this.createTree(arr, item.menuId) //此处的children对应于上面存放子节点的数组名
          return true
        }
      })
    },
    // 根据当前页&每页展示条数，从服务器获取列表
    async init(menuName, status) {
      this.tableLoading = true;
      try {
        await this.$api.menu.sysNormalDisable();
        let { code, data, msg } = await this.$api.menu.clientList(menuName, status);
        if (+code === 200) {
          this.tableData = this.$options.methods.setTreeData(data);
          // this.tableData = this.$options.methods.createTree(data, 0);
        } else {
          this.$message.error(msg);
        }
      } catch (error) {
        console.log(error)
      }
    },
    //展开/折叠
    toggleRowExpansion() {
      this.refreshTable = false;
      this.expands = !this.expands;
      this.$nextTick(() => {
        this.refreshTable = true;
      });
    },
  },
  created() {
    this.init(); //执行init
  }
}
</script>

<style lang="less" scoped>
.menu {
  width: 98%;
  margin: auto;
}
</style>